<template>
	<div>
		<div class="coupon_list pdtb">
			<ul>
				<li v-for="(item,index) in collectList">
                    <mt-cell-swipe
                      :right="[{ content:'删除', style: { background: '#3f3f3f', color: '#fff' }, handler: ()=>pass(index) }]" >
                            <div class="shop_title"><p>{{item.mchtName}}</p></div>
                            <div class="selled" v-if="item.sellNum>1">{{item.sellNum}}张</div>
                            <a @click="couponDetail(item)" class="clearfix">
                                <div class="coupon_img">
                                    <img :src="item.mchtLogUrl">
                                    <div class="coupon_tag" :class="{'tag_bg_yellow':item.couponType=='cash','tag_bg_green':item.couponType=='rebate','tag_bg_blue':item.couponType=='voucher','tag_bg_orange':item.couponType=='present','tag_bg_purple':item.couponType=='ticket' }">{{item.couponType | couponTp}}</div>
                                    <div class="coupon_tag" :class="{'tag_bg_yellow':item.type=='cash','tag_bg_green':item.type=='rebate','tag_bg_blue':item.type=='voucher','tag_bg_orange':item.type=='present','tag_bg_purple':item.type=='ticket' }">{{item.type | couponTp}}</div>
                                </div>
                                <div class="coupon_info">
                                    <div class="coupon_info_tit"><b>{{item.couponName||item.name}}</b></div>
                                    <div class="coupon_info_item">
                                        <!-- <p class="info_r">
                                            {{item.distance | setDistance}}
                                        </p> -->
                                        <p>有效期至：{{item.validatyEnd,1 | strDate}}</p>
                                    </div>
                                    <div class="coupon_info_item">
                                        <p class="info_r">已售出 {{item.soldnum}}</p>
                                        <star :couponComScore="item.comScore"></star>
                                        <p class="info_pad">{{item.comNum}}条</p>
                                    </div>
                                    <div class="clear"></div>
                                    <div class="coupon_info_item">
                                        <p class="info_r">已使用 {{item.usednum}}</p>
                                        <p class="left">{{item.mchtTypeValue}}</p>
                                        <p class="left info_pad">面值 &nbsp;<b class="red_color">
                                            {{item.couponType=='rebate'?'':'￥'}}<coupon-num :num="item.denomination" :type="item.couponType"></coupon-num>{{item.couponType=='rebate'?'折':''}}</b></p>
                                    </div>
                                </div>
                            </a>
                            <div class="clear"></div>
                            <div class="coupon_bot btnLine" >
                                <b class="coupon_money">{{item.valuation}}</b>
                                <span>芸券</span>
                                <img v-if="item.usrPicUrl" :src="item.usrPicUrl">
                                <img v-if="!item.usrPicUrl" src="../../images/xiaoyun1.jpg">
                                <span>{{item.usrName}}</span>
                                <span v-if="!item.usrName">小芸</span>
                            </div>
                    </mt-cell-swipe>

                </li>
			</ul>
          <go-top v-show="goTopState" ref="goTopId"></go-top>
		  <no-data v-if="noInfo"></no-data>
		</div>

	</div>
</template>
<script>
	import star from '../../componentes/global/star.vue'
	import couponNum from '../../componentes/global/couponNum.vue'
  import getData2 from '../../service/getData2.js'
	import * as types from '../../vuex/types.js'
  import { CellSwipe,MessageBox,Toast } from 'mint-ui'
	import {Storage} from 'src/utils/storage.js'

	export default {
		data(){
			return{
				collectList:[],
                noInfo:false,
                goTopState:false,
			}
		},
		components: {
            star,couponNum
        },
		computed: {

		},
    beforeRouteLeave(to, from, next){
        // 避免返回时未清除定时器
        if (this.$refs.goTopId) {
            this.$refs.goTopId.clear();
        }
        window.removeEventListener('scroll', this.gotopScroll);
        next()
    },
		created:function(){
			this.$emit('header-info', {
	      title: '我的收藏',
	      isBack: true,
	      isMessage: false
	    })
            window.addEventListener('scroll', this.gotopScroll);
			this.collectCont();
            // console.log(Storage.get("collect_info"));
		},
		methods:{
            gotopScroll(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                }
            },
			collectCont:function(){
				var collectArry = Storage.get("collect_info");
				if (collectArry) {
					this.collectList=collectArry.collectList;
					if(collectArry.collectList.length == 0){
                        this.noInfo = true;
                    }else{
                        this.noInfo = false;
                    }
				}else{
					this.collectList=[];
                    this.noInfo = true;
				}
			},
			//查看详情
            couponDetail:function(params){
                let me = this;
                Storage.set("couponInfo",params);
                if (params.seqNo) {
                    //验证挂单是否存在 1是 2否
                    getData2.isExistence({},params.seqNo).then(function(rep){
                        if (rep.respCode=='00') {
                            if (rep.content==0) {
                                me.$router.push({
                                    name: 'couDetail',
                                    query: {
                                        seq: params.seqNo || params.id || '',
                                        couponId: params.couponId,
                                        mchtId: params.mchtId,
                                        usrPicId: params.usrPicId || '',
                                        usrId: params.usrId || '' // 挂单用户ID
                                    }
                                });
                            }else{
                                Toast({
                                  message: '此券已售出或已撤销',
                                  duration: 800
                                });
                            }
                        }else{
                            Toast({
                              message: rep.errorInfo,
                              duration: 800
                            });
                        }

                    }).catch(function(rep){
                        Toast({
                          message: '请求失败',
                          duration: 800
                        });
                    })
                }else{
                    me.$router.push({
                        name: 'couDetail',
                        query: {
                          seq: params.seqNo || params.id || '',
                          couponId: params.couponId,
                          mchtId: params.mchtId,
                          usrPicId: params.usrPicId || '',
                          usrId: params.usrId || '' // 挂单用户ID
                        }
                    });
                }


                // this.$router.push({name:'couponDetail'});

            },
             // 取消收藏
            pass:function(index){
                var me=this;
                var collectArry = Storage.get("collect_info")
                // console.log(index);
                MessageBox({
                  title: '提示',
                  message: '确定删除?',
                  showCancelButton: true
                }).then(action => {
                    console.log(action);
                    if(action=='confirm'){
                        Toast({
                          message: '删除成功',
                          duration: 800
                        });
                        console.info(index);
                        collectArry.collectList.splice(index,1)
                        collectArry.listId.splice(index,1)
                        Storage.set("collect_info",collectArry);
                        me.collectList=collectArry.collectList;
                        if (collectArry) {
                            if(collectArry.collectList.length == 0){
                                me.noInfo = true;
                            }else{
                                me.noInfo = false;
                            }
                        }else{
                            me.noInfo = true;
                        }
                    }else if(action=='cancel'){
                        console.log('取消');
                    }
                });
            },

		}
	}
</script>
<style>
    .btnLine{line-height: 3rem;}
    .coupon_bot img{vertical-align: -0.3rem;}
    .coupon_info_item .zhekou{font-size:1rem!important;}
    .coupon_info_item .coupon_db{font-size:1rem!important;}
    .coupon_bot img{display: inline-block;width: 1.35rem;height: 1.35rem;transform: translateY(-14%);margin-left: 2%;}
    .coupon_img {float: left;width: 5rem;height: 5rem;margin: 1rem .667rem 0 1rem;position: relative;}
    .coupon_img img{width: 5rem;height: 5rem;}
    .pdtb .info_pad{line-height: 1.4rem}
    .coupon_list.pdtb .mint-cell-value{
        display: block;
    }
    /*电子券头部商户*/
    .shop_title{
        margin-left: -0.15rem;
        background-color: #fff;
        z-index: 10;
        position: relative;
        padding: 0 0 0 1rem;
        border-radius: .2rem;
        color:#333;
    }
    .shop_title p{
        font-weight: bold;
        font-size: 1rem;
        line-height: 2.2rem;
        border-bottom:1px solid #e6e6e6;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>
